body{
    background-color: #b1b3b3;
}

#main{
    margin-top: 76px;
    padding: 10px 0px 50px 0px;
    background-color: #f4f4f4;
    border-radius: 15px;
}


.grid-container {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 10px;
    row-gap:10px;
    justify-content: center;
    margin-top:20px;
    width:100%;
    /* height: 100vh; */
    
    
}

.red-box {
    border: #020c6c;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
}


.grid-item{
    width:140px;
    padding: 0px 10px;
}

#nav {
    display:block;
    position: fixed;
    height: 0;
    top:0;
    left:0;
    width:100%;
    background-color: #020c6c;
}

#logo {
  margin: 5px;
}

#pagetop {
    position: absolute;
    height: 66px;
    top:0;
    left:0;
    width:100%;
    background-color: #020c6c;
}

#back-btn {
    position: absolute;
    right:0;
    margin: 25px;
    font-size: 18px;
    color:#ffffff;
    text-decoration: none;
}

a {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    
}

.grid-container a {
    background-color: #ffffff;
    border-radius: 15px;
    
}

h1 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color:#020c6c;
    font-size: 24px;
    text-align: center;
    margin-top: 16px;
   
    border-radius: 10px;
    padding: 5px 10px;
    max-width: 100%;
}

h2 {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    color:#020c6c;
    font-size: 18px;
    text-align: center;
    padding: 5px 10px;
}

.main-button {
    display: flex;
    width:150px;
    height:150px;
    text-align: center;
    border-style: solid;
    border-color: #f26334;
    border-radius: 20px;
    background-color: #020c6c;
    color:#f26334;
    text-decoration: none;
    align-items: center;
    flex-direction: column;
} 

.actor-name {
    font-size: 14px;
    text-align: center;
   max-width: 140px;
}

.btn-2 {
    
    width:140px;
    height: 140px;
    border-radius: 15px;
    color:#ffffff;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    display: flex;
    align-items: center;
    text-decoration: none;
    margin:0px 0px;
}

.buttons-container{
    color:#ffffff;
    text-decoration: none;
}

#audan {
    background:linear-gradient(0deg, #020d6ca6, #020c6ca6), url("./images/audan.jpg");
    background-size:cover;
}

#shervin {
background:linear-gradient(0deg, #020d6ca6, #020c6ca6), url("./images/shervin.jpg");
background-size:cover;
}
#jane {
background:linear-gradient(0deg, #020d6ca6, #020c6ca6), url("./images/jane.jpg");
background-size:cover;
}
#rachel{
background:linear-gradient(0deg, #020d6ca6, #020c6ca6), url("./images/rachel.jpg");
background-size:cover;
}

#brendan {
    background:linear-gradient(0deg, #020d6ca6, #020c6ca6), url("./images/brendan.jpg");
    background-size:cover;
}

#priya {
background:linear-gradient(0deg, #020d6ca6, #020c6ca6), url("./images/priya.jpg");
background-size:cover;
}
#caroline {
background:linear-gradient(0deg, #020d6ca6, #020c6ca6), url("./images/caroline.jpg");
background-size:cover;
}
#raymond{
background:linear-gradient(0deg, #020d6ca6, #020c6ca6), url("./images/raymond.jpg");
background-size:cover;
}

#ildiko{
    background:linear-gradient(0deg, #020d6ca6, #020c6ca6), url("./images/ildiko.jpg");
    background-size:cover;
    }


#paul{
    background:linear-gradient(0deg, #020d6ca6, #020c6ca6), url("./images/paul.jpg");
    background-size:cover;
    }    

#dan{
    background:linear-gradient(0deg, #020d6ca6, #020c6ca6), url("./images/dan.jpg");
    background-size:cover;
    }  

#ildiko{
        background:linear-gradient(0deg, #020d6ca6, #020c6ca6), url("./images/ildiko.jpg");
        background-size:cover;
        }
    
    
#nick{
        background:linear-gradient(0deg, #020d6ca6, #020c6ca6), url("./images/nick.jpg");
        background-size:cover;
        }    
    
#jack{
        background:linear-gradient(0deg, #020d6ca6, #020c6ca6), url("./images/jack.jpg");
        background-size:cover;
        }

#sean{
            background:linear-gradient(0deg, #020d6ca6, #020c6ca6), url("./images/sean.jpg");
            background-size:cover;
            }  

.red {
    border: red;
    border-style: solid;
    border-radius: 10px;
    border-width: 2px;
}

.icon {
    margin-top:10px;
}

.button-text{
    padding: 0px 5px;
}

.continue-btn{
    color:#ffffff;
    padding:10px 0px;
    background-color: #f26334 !important;
    text-align: center;
    grid-column-start: 2;
    width:160px;
    text-decoration: none;
}

.back-btn {
    color:#ffffff;
    padding:10px 0px;
    background-color: #020c6c !important;
    text-align: center;
    grid-column-start: 1;
    width:160px;
    text-decoration: none;
}

p {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 14px;
    padding: 0px 15px;
}