style.css

body,html {
    margin:0;
    padding:0;
    overflow-x: hidden;
}
body *{
    margin:0;
    padding:0;
}




::root{
   --font-size:1em;
}

#title{
    position: relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    font-size:3vmin;

    background-image: url("images/Sweet-Home-Alabama.webp");
    background-size: cover;
    background-position: bottom;

    max-width:100vw; /* bottom comment explains why im using "max-width" instead of "width" */
    height:75vh;
    border-block:solid;
}

#title h1{
    font-size: 4em;
    padding-inline:4vw;
    border-radius:0.5vmin;

    font-family: sans-serif;
    text-shadow: 0px 0px 5px red;
    text-decoration: underline;
    color:white;
}
#title a{
    position:absolute;
    bottom:0;
    left:50%;
    transform: translate(-50%);
    font-size:0.7em;
}

/*slides */
.slide{
    max-width:100vw; /* bottom comment explains why im using "max-width" instead of "width" */
    min-height:100vh; /* for a dumb reason when I set any value to this it causes the width to normally overflow*/
    /* 
    no this does nothing to solve it. 
    CSS is like using a curtain,
    except it get tangled if you use it in any way so you must do some weird trickery in order to make it work 
    */
    box-sizing:border-box;
    position:relative;
    border:solid;

    display:grid;
    grid-template-areas: 
    "header"
    "information"
    "footer"
    ;
    column-gap: 20px;
    row-gap: 20px;
    grid-template-rows: 10% 1fr 10%;
    
    padding: 1%;
    

}

.info-card{
    position: relative;
    border: 2px inset grey;
    box-shadow: 0px 0px 5px 2px grey;
}
.slide h1{
    font-family: "Josefin Sans";
}
.slide h2{
    font-family: "Josefin Sans";
}

.slide-header{
    padding-inline:5%;
    display: flex;
    align-items: center;
    
}

.slide-footer{    
    position: relative;
    padding-left: 2%;
    padding-block: 0.5%;
    border: 2px inset grey;
    box-shadow: 0px 0px 5px 2px grey;
}

/* Territory */

#Territory{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 50%;
    column-gap: 5%;
    text-align: center;
    justify-items: center;
    align-items: center;
}

#Territory > *{
    display: grid;
    grid-template-rows:25% 1fr;
    row-gap: 5%;
}
#Territory p{
    padding: 5%;
}
#Territory img{
    height: 200px;
    grid-column: 1 / -1;
}
/*Statehood*/

#Statehood{
    display: grid;
    align-content: space;
    height: 100%;
    row-gap: 20px;
}


#Statehood-line{
    display: grid;
    grid-template-columns: 10% 1fr 10%;
    justify-items: center;
    align-items: center;
    text-align: center;
}

#Statehood-line  hr{
    display:inline;
    height: 0px;
    width: 100%;
}
.Statehood-events{
    display: grid;
    width: 100%;
    text-align: center;
    grid-auto-flow: column;
    justify-content:space-between;
}
.Statehood-events > span{
    max-width: calc(100%/2);
    min-width: 30px;
    display: grid;
    align-content: center;
    
}


/*Stats*/

#Stats{
    display: grid;
    box-sizing: border-box;
    padding-inline: 5%;
    box-sizing: border-box;
    align-items: center;
}
#Stats img{
    grid-column: 2;
    grid-row: 1 / 5;
    height: 80%;
}
#Stats > span{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.Stats-numbers{
    width: 90%;
}

.Stats-bar{
    border: 1px solid;
    min-height: 20px;

    transition: width 500ms;
}

/*Parks*/

#Parks{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    text-align: center;
    position: relative;
    column-gap: 2%;
}

#Parks > div{
    display: grid;
    
    justify-items: center;
    align-items: center;
}
#Parks > div > span{
    grid-row:-1 -1;
}
#Parks > div > img{
    width: 80%;
}

/* Capital */
#capital{
    display: grid;
    grid-template-columns: 50% 50%;
    gap: 20px;
    justify-items: stretch;
    align-items: stretch;
    text-align: center;
}
#capital > span {
    grid-column: 1 / -1 ;
    display: grid;
    align-items: center;
    justify-items: center;
}
#capital > div{
    display: grid;
    justify-content: center;
    align-content: center;

}

/*Top 5 places to visit*/



#top5 {
    display: grid;
    position: relative;
    width: 100%;
    height: 100%;
    justify-items: center;
    align-items: center;
    grid-template-columns: 100%;
    grid-template-rows: repeat(5,1fr);
    row-gap: 20px;
}
#top5 li{
    display: grid;
    grid-template-areas:
    "title img"
    "texts img"
    ;
    grid-template-columns: 80% 1fr;
    justify-items: stretch;
    width: 90%;
}
#top5 li h2{
    grid-area: title;
    text-align: left;
}
#top5 li p{
    grid-area: texts;
    text-align: left;
}
#top5 > li > img{
    grid-area: img;
    width: 25vmin;
}

/* My top 3, basically copied and pasted code */

#myTop3 {
    display: grid;
    position: relative;
    width: 100%;
    height: 100%;
    justify-items: center;
    align-items: center;
    grid-template-columns: 100%;
    grid-template-rows: repeat(3,1fr);
    row-gap: 20px;
}
#myTop3 li{
    display: grid;
    grid-template-areas:
    "title img"
    "texts img"
    ;
    grid-template-columns: 80% 1fr;
    justify-items: stretch;
    width: 90%;
}
#myTop3 li h2{
    grid-area: title;
    text-align: left;
}
#myTop3 li p{
    grid-area: texts;
    text-align: left;
}
#myTop3 > li > img{
    grid-area: img;
    width: 25vmin;
}

/* Industry */
#industry{
    display: grid;
    grid-template-columns: 1fr 25% 1fr;
    align-items: stretch;
    column-gap: 20px;
}

#industry img{
    align-self: center;
}

#industry *{
    width: 100%;
}


#industry > div {
    display: grid;
    grid-template-rows: 10% 1fr 10%;
    justify-items: center;
    row-gap: 20px;
}

#industry > div ol{
    display: grid;
    justify-items: center;
    align-content:space-evenly ;
}

#industry > div ol li{
    width: 80%;
}


/*Business & Economy*/

#economyStuff{
    display: grid;
    grid-template-rows: 1fr 1fr;
    align-items:stretch;
}
#economyStuff > div{
    display: grid;
    grid-template-rows:20% 1fr 20%;
}
#economyStuff > div > div:nth-child(2){
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    text-align: center;
    align-items: stretch;
    align-content: center;
    row-gap:5px;
    column-gap: 5px;
}
#economyStuff > div > div:nth-child(2) span{
    position: relative;
    border: 2px inset grey;
    box-shadow: 0px 0px 5px 2px grey;
    display:flex;
    justify-content:center;
    align-items:center;
    
}

/*State Items*/

#items{
    display: grid;
    row-gap:5px;
    justify-items: center;
}
#items > div{
    display: grid;
    grid-template-columns: 1fr 25%;
    grid-template-rows: 1fr 1fr;
    position: relative;
    border: 2px inset grey;
    box-shadow: 0px 0px 5px 2px grey;
    width:90%;
    justify-items: center;
    text-align:left;
   
}
#items h2{
    width:90%;
}
#items > div p{
    grid-row: 2/2;
    width:80%;
}
#items > div img{
    grid-column: 2/2;
    grid-row: 1 / -1;
    height: 12vmin;
}

/* Top 5 Facts */

#facts5{
    display:grid; /* At this point I should have given by default all info the grid display*/
    justify-items: center;
    grid-template-columns: 1fr 1fr;
}
#facts5 > li{
    width:80%;
}

/* Interesting Facts*/

#interesting{
    display:grid;
    justify-items: center;
}
#interesting > li{
    width:80%;
}


/*universities*/
#universities{
    display:grid;
    justify-items: center;
}
#universities > li{
    width:80%;
}

/* Other Schools and more*/

#schools{
    display:grid;
    justify-items: center;
    grid-template-columns: 1fr 1fr;
}

/* Lazyed out on the last slide, not enough time and barely stable wifi */

#summary{
    text-align: center;
}

#mainHeader{
    display:flex;
    align-items:center;
    height:12vh;
}
#mainHeader-title{
    margin-left:2vw;
}
#mainHeader nav{
    align-self:flex-end;
}

@font-face {
    font-family: Epilogue;
    src: url("Fonts/Epilogue/Epilogue-VariableFont_wght.ttf");
}
@font-face {
    font-family: "Josefin Sans";
    src: url("Fonts/Josefin Sans/JosefinSans-VariableFont_wght.ttf");
}