@font-face {
      font-family:"archersemibold" ;
      src: url(../font/ArcherSemiboldPro.otf);
}

body{
    background-color: #e6e6e6;
    height: 100vh;
}

#log{
     padding: 20px;
     margin: 20px;
}

nav{
    display: flex;
    justify-content: right;
    padding-right: 20px;
    margin-top: -80px;

}

nav a{
      text-decoration: none;
      margin: 20px;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
      font-size: 20px;
      font-weight: lighter;
      color: #DE6E0C;
}

nav :hover{
             color: #DE6E0C;
             opacity: -50%;
             transform: scale(1.05);
             transition: 0.6s ease-in-out;
}

h1{ 
   font-family:"archersemibold";
   color: #DE6E0C;
   font-size: 64px;
   font-weight: bold;
   text-align: center;
   padding: 60px;
   border: #DE6E0C;
   border-style: solid;
   border-radius: 30px;
   margin: 50px;
   margin-top: 250px;

}


div{
    align-items: center;
}

span{
    color: #DE6E0C;
    font-weight: bold;
}

#first{
        display: flex;
        justify-content: center;
        justify-content: space-around;  
        margin-top: 230px;
        margin-bottom: 80px;
        
}

#second{
        display: flex;
        justify-content: center;
        justify-content: space-between;
        padding: 150px;
        margin-bottom: 150px;
}

p{
  font-family: Arial, Helvetica, sans-serif;
}

footer{
       background-color:#DE6E0C ;
       font-family: Arial, Helvetica, sans-serif;
       font-weight: bolder;
       font-size: 16px;
       display: flex;
       flex-direction: column;
       align-items: center;
       border-radius: 30px;
       margin: 50px;
       padding: 10px;
}

#media{
       display: flex;
       flex-wrap: wrap;
       gap: 18px;
}