@import url('https://fonts.googleapis.com/css2?family=Khand:wght@300;400;600&family=Nunito+Sans&display=swap');

/* Global */

* {
    box-sizing: border-box;
    margin:0;
    padding:0;
}

body {
    font-family: 'Nunito Sans', sans-serif;
    background: linear-gradient(180deg, #F1F1F1 20%, white);
}

ul {
    list-style: none;
}

h1,h2,h3 {
    font-family: 'Khand', sans-serif;
}

img {
    max-width: 300px;
}
/* Header */

header {
    display: flex;
    /*justify-content: space-between;*/
    max-width: 100%;
    /* background-image: url(images/oldmain.jpeg); */
    background-size: cover;
    background-position: right;
    background-repeat: no-repeat;
    background-color: #661424;
    background-blend-mode: soft-light;
    max-height: 140px;
}

header {
    background-color: rgba(35, 31, 32, .8);
    backdrop-filter: blur(10px);
    box-shadow: 0px 0px 8px black;
}

.trapezoid-header {
    border: 1px solid #661424;
    width: 200px;
    height: 140px;
    background-color: #661424;
    position: relative;
    
}

header .trapezoid-half {
    position: relative;
    min-width: 90%;
    bottom: 235px;
    left: 50px;
    border-bottom: 148.5px solid #661424;
    border-right: 90px solid transparent;
}

.left-header {
    min-width: 50%;
}

.left-header h1 {
    position: relative;
    bottom: 110px;
    z-index: 5;
    padding-left: 3rem;
    font-size: 3.5rem;
}

/*.right-header {
    background-image: url(images/DeansAndStudents_BW4A4427.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #661424;
    background-blend-mode: soft-light;
    opacity: 80%;
    z-index: -5;
    height: 140px;
    width:100%;
    position: relative;
    right: 150px;
}*/



.right-header .mission-statement {
    max-width: 90%;
    max-height: 100%;
    /*text-align: right;
    /*padding: 1rem;
    padding-left: 2rem;
    padding-top: 1rem;*/
    padding-top: 30px;
    padding-right: 10px;
    font-size: 18px;
}

/* Cards */
.cards {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 100%;
}

.card {
    max-width: 28%;
    max-height: 100%;
    justify-content: space-between;
    transition: 0.3s ease-in-out;
}

.picture {
    width: 100%;
    height: 250px;
    background-position: center center;
    background-size: cover;
}
.picture1 {
    background-image: url(images/BKTrees_BW4A0240\ \(1\).JPG);
}

.picture2 {
    background-image: url(images/FHUSite_Family.jpg);
}

.picture3 {
    background-image: url(images/BW5A0900.jpg);
}

.card p  {
    text-align: center;
    padding: 20px;
    background-color: rgba(35, 31, 32, .8);
    backdrop-filter: blur(10px);
    /* Kenan suggestes changing the card color for consistancy,
    he liked the look we had on the stats */
    height: 200px;
    font-size: 18px;
}
.card img {
    width: 100%;
}

.card h3 {
    width: 50%;
    font-weight: 200;
    font-size: 26px;
    overflow: visible;
    background-color: #661424;
    color: #F1F1F1;
    padding: 10px;
    padding-top: 17px;
    padding-left: 15px;
}
.card-main {
    box-shadow: 0px 0px 8px black;
}
.trapezoid-half {
    width: 100px;
    height: 0;
    border-bottom: 70px solid #661424;
    border-right: 50px solid transparent;
}
.card-trapezoid {
    display: flex;
    position: relative;
    top: 25px;
    right: 10px;
    /*box-shadow: 0px 0px 8px black;*/
    /* adding a drop shadow here is hilarious... or maybe I'm just tired */
}

/* Stats */

.stats {
    text-align: center;
}

.stats h1 {
    font-size: 56px;
    margin-top: 70px;
}

/* Stat-Grid */


.stat1 h2,
.stat2 h2,
.stat3 h2,
.stat4 h2,
.stat5 h2 {
    transition: all 0.1s ease-in-out;
}

.stat1 h2:hover,
.stat2 h2:hover,
.stat3 h2:hover,
.stat4 h2:hover,
.stat5 h2:hover{
    transform: scale(1.1);
}

.stat1 {
    grid-area: stat1;
}

.stat2 {
    grid-area: stat2;
}

.stat3 {
    grid-area: stat3
}

.stat4 {
    grid-area: stat4;
}

.stat5 {
    grid-area: stat5
}

.stat-grid {
    gap: 20px;
    display: grid;
    grid-template-areas: 
    "stat1 stat2 stat3"
    "stat1 stat4 stat5";

    z-index: 5;
    margin: auto;
    padding: 3rem 2rem;
    max-width: 95%;
    
    text-align: center;
    color: #F1F1F1;
    background-color: rgba(35, 31, 32, .8);
    backdrop-filter: blur(10px);
    box-shadow: 0px 0px 8px black;
    /* I added the drop shadow here too, don't know if I like it or not */

}

.stat-grid h2 {
    font-size: 5.5rem;
    font-weight: 600;
}

.stat-grid {
    font-size: 1.5rem;

}

/* 
.stat-grid:after {
    content: '';
    z-index: 1;
    height: 100px;
    width: 100%;
    border: 100px solid #661424;
    transform: skewY(-3deg);
    transform-origin: 0 100%;
    position: relative;
} */

.white-shape {
    z-index: -2;
    /*height: 100px;*/
    width: 100%;
    /* max-width: 500px; */
    border: 250px solid #808080;
    opacity: 60%;

    transform: skewY(2deg);
    transform-origin: 0 100%;

    position: relative;
    bottom: 250px;

    margin-bottom: -500px;

}

.red-shape {
    z-index: -1;
    width: 100%;
    border: 190px solid #661424;

    transform: skewY(-2deg);
    transform-origin: 0 100%;

    position: relative;
    bottom: 410px;
}

.card:hover{
    transform: translateY(-10px);  
}
/* Media Query */

/* Tablet */

@media (max-width: 900px) {

    .cards {
        height: 100%;
        justify-content: center;
        width: 100%;
        flex-direction: column;
    }

    .card {
        margin: auto;
        /* max-width: 600px; */
        max-width: 80%;
        margin-top: 3rem;
    }

    .card p {
        padding: 50px;
        font-size: 20px;
    }

    .card .card-trapezoid {
        max-width: 500px;
    }

    .right-header .mission-statement{
        padding-top: 20px;
    }

    /* Animation */

        .card {
            transform: translateX(400%);
            transition: all 0.5s ease;
        }

        .card:nth-of-type(even) {
            transform: translateX(-400%);
        }
        
        .card.show {
            transform: translateX(0);
        }

}

@media (max-width: 800px) {

    header {
        max-width: 100%;
    }

    .trapezoid-header {
        position: relative;   
        width: 200px;
        height: 140px;
        background-color: #661424;
    }
    
    header .trapezoid-half {
        position: relative;
        width: 150px;
        bottom: 250px;
        left: 100px;
        border-bottom: 177px solid #661424;
        border-right: 100px solid transparent;
    }
    
    .left-header h1 {
        position: relative;
        bottom: 110px;
        z-index: 5;
        padding-left: 2rem;
        font-size: 3rem;
    }
    
    .right-header {
        height: 100%;
        max-width: 100%;
    }
    
    .right-header .mission-statement {
        max-width: 400px;
        max-height: 100%;
        text-align: right;
        padding: 1rem;
        padding-left: 3.5rem;

    }
}

@media (max-width: 750px) {

    .stats h1 {
        margin-top: 12rem;
        font-size: 2.5rem;
    }

    .right-header .mission-statement{
        font-size: 16px;
    }
    .stat-grid {
        gap: 20px;
        display: grid;
        grid-template-areas: 
        "stat1 stat2"
        "stat1 stat3"
        "stat4 stat5";
    
        z-index: 5;
        margin: auto;
        padding: 2rem;
        max-width: 70%;
        
    }

    .stat-grid h2 {
        font-size: 4rem;
        font-weight: 600;
    }
    
    .stat-grid {
        font-size: 1rem;
    
    }

    /* .red-shape {
        bottom: 380px;
    } */

    .white-shape {
        bottom: 150px;
    }

    .red-shape {
        bottom: 420px
    }
}

/* Mobile */


@media (max-width: 700px) {
    
    header {
        display: block;
        min-height: 210px;
    }

    .trapezoid-header {
        height: 80px;
        position: relative;
        z-index: 5;
        width: 100%;
    }
    
    header .trapezoid-half {
        display: none;
    }
    
    .left-header h1 {
        position: relative;
        bottom: 60px;
        z-index: 5;
        padding-left: 1rem;
        font-size: 2rem;
    }
    
    .right-header .mission-statement {
        max-width: 500px;
        max-height: 100%;
        text-align: left;
        padding-top: 4rem;
        font-size: 17px;
        position: relative;
        bottom: 95px;
    }

    .stats h1 {
        margin-top: 10rem;
        font-size: 2.5rem;
    }

    .red-shape {
        bottom: 440px
    }

   
}

@media (max-width: 600px) {
    .card {
      margin: auto;
      max-width: 330px;
      margin-bottom: 2rem;
      margin-top: 3rem;

    }
    .card p {
        font-size: 18px;
        padding: 35px;
    }
}

@media (max-width: 595px){
    header .trapezoid-half {
        display: none;
    }
    .stats h1 {
        font-size: 3rem;
    }
    .white-shape{
        border: 220px solid #808080;
    }
}
/* Microinteractions */


/*.card::after{
    transform: translateY(0px);
}*/