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

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

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;
     margin-bottom: 200px;
}

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

div{
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
}


#bold{
      font-family: Arial, Helvetica, sans-serif;
      font-size: 20px;

}

span{
     color: #DE6E0C;
     
}

main{
      margin: 89px;
      margin-left: 314px;
      margin-top: 120px;
      margin-bottom: 214px;
      gap: 44px;
      display: flex;
      flex-direction: column;

}

span{
     color: red;
}

a{
  text-decoration: none;
}

button{
        background-color: #DE6E0C;
        color:white;
        padding: 15px;
        border-radius: 15px;
        font-family: "Roboto";
        font-weight: lighter;
        cursor: pointer;
}

#social{
        margin-left: 60px;
}

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

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