/* 

Written by Dimitri Moraetes
Updated: 11/11/2025

 */

@font-face {
    font-family: "San Francisco";
    src: url("https://applesocial.s3.amazonaws.com/assets/styles/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff");
  
}
@font-face {
    font-family: "Raleway";
    src: url("../fonts/Raleway-VariableFont_wght.ttf");
  
}



*, html {
    margin:0;
    padding:0;
    
}

body {
    font-family: "San Francisco", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 1.8em;
    background-color:#f7f6f6;
}

  @media screen and (max-width:2160px) {
    body {
   font-family: "San Francisco", -apple-system, BlinkMacSystemFont, sans-serif;
   font-size: 1.7em;
    }
   }

@media screen and (max-width:1900px) {
    body {
   font-family: "San Francisco", -apple-system, BlinkMacSystemFont, sans-serif;
   font-size: 1.7em;
    }
   }

   @media screen and (max-width:900px) {
    body {
   font-family: "San Francisco", -apple-system, BlinkMacSystemFont, sans-serif;
   font-size: 1.5em;
    }
   }

   @media screen and (max-width:500px) {
    body {
   font-family: "San Francisco", -apple-system, BlinkMacSystemFont, sans-serif;
   font-size: 1.5em;
    }
   }

.wrapper {

    margin:0 auto;
    padding-right: 10px;
    padding-left: 10px;
}

/* Image */

img {
    background: #000;
    position: relative;
    content: '';
    background: transparent;
    border: 1px solid #000;
    top: 7px;
    right: 7px;
    bottom: -7px;
    left: -7px;
    filter: drop-shadow(5px 5px 4px #000);
  }

 img.float{
    float: left;
}

header {
padding:20px;
text-align: center;
display: block;
background-color: rgb(243, 243, 243);
color: #313131;
font-weight:bold;
font-size: 2.6em;
font-family: "Raleway","San Francisco", -apple-system, BlinkMacSystemFont, sans-serif;

}

   @media screen and (max-width:500px) {
    header {
padding:20px;
text-align: center;
display: block;
background-color: rgb(243, 243, 243);
color: #313131;
font-weight:bold;
font-size: 2em;
font-family: "Raleway","San Francisco", -apple-system, BlinkMacSystemFont, sans-serif;

}
   }



div.dm {
    display: block;
    background-color: transparent;
    font-size: .3em;
    letter-spacing: .4em;
    text-transform: uppercase;
    color: #e2b204;
}

nav {
 display: block;
 background-color: rgb(243, 243, 243);
 border-bottom-right-radius: 33px;
 border-bottom-left-radius: 33px;
 text-align: center;
 color: #ffffff;
 font-family: "Raleway","San Francisco", -apple-system, BlinkMacSystemFont, sans-serif;


}

.navbar {
    background-color: rgb(243, 243, 243);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 80%;
    margin: auto;
    
  }

.navbar ul {
    display: flex;
    background-color: rgb(243, 243, 243);
  }

.container .navbar {
    justify-content: space-between;
  }

.navbar ul li {
    list-style-type: none;
  }
  
.navbar ul li {
    padding: 10px;
    margin: 0 10px;
    background-color:  rgb(243, 243, 243);
  }
  
.navbar a {
    background-color:  rgb(243, 243, 243);
    color: #000;
    font-weight: bold;
    text-decoration: none;
  }
  
.navbar a:hover {
    color: #d1a400;
  }

  /* NAV - MOBILE */

div#mobile {
    display: none;
}



/* BODY */

div.space {
        margin-top: 20px;
}

div.content {
    background-color: #FFF;
    margin: 0 auto;
    padding:20px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    max-width: 2000px;
    
     border-top-right-radius: 33px;
     border-top-left-radius: 33px;
     border-bottom-right-radius: 33px;
     border-bottom-left-radius: 33px;

}

div.col1 {
    padding:10px;
    
}

div.col2 {
    flex: 1;
    padding:10px;
    margin-top:10px;

}
 
div.col1 img {
    
    width:45vh;

}



@media screen and (max-width:2000px) {


    div.content {
        padding:20px;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        flex-direction: column;
    
    } 
    
    div.col1 img {
        display: block;
        margin: 0 auto;
         width:50vh;
    }

    .content h1{
        margin: 0 auto;
        text-align: center;
        max-width: 60vh;
        font-weight: 400;
        font-size: 1.5em;
        font-family:"Raleway",-apple-system, BlinkMacSystemFont, sans-serif;
        padding:0x;
        margin-bottom: 5px;
        color:rgb(61, 61, 61);
        letter-spacing: .022em;
        
    }
    
   }

   
   @media screen and (max-width:1080px) {


    div.content {
        padding:20px;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        flex-direction: column;
    
    } 
    
    div.col1 img {
        display: block;
        margin: 0 auto;
        width:40vh;
    }

    .content h1{
        margin: 0 auto;
        text-align: center;
        max-width: 55vh;
        font-weight: 400;
        font-size: 1.4em;
        font-family:"Raleway",-apple-system, BlinkMacSystemFont, sans-serif;
        padding:0x;
        margin-bottom: 5px;
        color:rgb(61, 61, 61);
        letter-spacing: .022em;
        
    }
    
   }

   @media screen and (max-width:960px) {


    div.content {
        padding:20px;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
        flex-direction: column;
    
    } 
    
    div.col1 img {
        display: block;
        margin: 0 auto;
        width:35vh;
    }

    .content h1{
        margin: 0 auto;
        text-align: center;
        max-width: 55vh;
        font-weight: 400;
        font-size: 1.4em;
        font-family:"Raleway",-apple-system, BlinkMacSystemFont, sans-serif;
        padding:0x;
        margin-bottom: 5px;
        color:rgb(61, 61, 61);
        letter-spacing: .022em;
        
    }
    
   }


div.col3 {
    
    padding:10px;
}



/* Bottom Content */






.content h1{
    text-align: center;
    max-width: 60vh;
    font-weight: 400;
    font-size: 1.2em;
    font-family:"Raleway",-apple-system, BlinkMacSystemFont, sans-serif;
    padding:0x;
    margin-bottom: 5px;
    color:rgb(61, 61, 61);
    letter-spacing: .022em;
    
}


.content h2{
    font-weight: 400;
    font-size: 1.3em;
    font-family:"Raleway",-apple-system, BlinkMacSystemFont, sans-serif;
    padding:0x;
    color:rgb(61, 61, 61);
    
}

.content h3{
    font-weight: 400;
    font-size: 1.2em;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    padding:0x;
    color:rgb(61, 61, 61);
    
}


/* FOOTER*/
.dots {
    margin-left: auto;
    margin-right: auto;
    border-top: #888888 dotted;
    width:80vh;
    margin-bottom:5px;
}

footer {
padding:20px;
display: flex;
justify-content: center;
align-content: center;
    
background-color: #f7f6f6;
margin-top:50px;
padding:20px;
font-family:-apple-system, BlinkMacSystemFont, sans-serif;
text-align: center;
font-size: .7em;

}

@media screen and (max-width:720px) {

    .dots {
        margin-left: auto;
        margin-right: auto;
        border-top: #888888 dotted;
        width:auto;
        margin-bottom:5px;
    }
}

@media screen and (max-width:480px) {

    .dots {
        margin-left: auto;
        margin-right: auto;
        border-top: #888888 dotted;
        width:auto;
        margin-bottom:5px;
    }
}