.tittle{
    border: 1.5px solid black;
    height:400px;
    display: flex;
    background-color:  #4D4C7D;
    border: 15px solid #A1CCD1;
    border-radius: 10px;
    
}

.topic{
    margin-top:100px;
    margin-left: 100px;
    width: 550px;
    height: 200px;
    font-size: 2rem;
    color:#FEFFAC;
    font-family:'Franklin Gothic Medium';
    
}
.gif{
    background-image: url("ST9f.gif");
    background-size: cover;
    height: 300px;
    width: 300px;
    margin-top: 1rem;
    border-radius: 20px;
    box-shadow: 5px 5px 7px rgba(0.5,0.5,0.5,0.5);
    margin: auto;
    margin-left: 200px;
}

.hover {
    border: 8px solid;
    border-image: repeating-linear-gradient(135deg,#080202 0 10px,#73BBC9 0 20px,#F1D4E5 0 30px) 8;
    -webkit-mask: conic-gradient(from 180deg at top 8px right 8px, #0000 90deg,#000 0)
       var(--_i,200%) 0  /200% var(--_i,8px) border-box no-repeat,
      conic-gradient(at bottom 8px left  8px,  #0000 90deg,#000 0)
       0   var(--_i,200%)/var(--_i,8px) 200% border-box no-repeat,
      linear-gradient(#000 0 0) padding-box no-repeat;
    transition: .3s, -webkit-mask-position .3s .3s;
}
.hover:hover {
    --_i: 100%;
    color: #000000;
    transition: .3s, -webkit-mask-size .3s .3s;
}

.option{
    margin-top: 2rem;
    flex-wrap: wrap;
    display: flex;
    justify-content: space-evenly;
    border-radius: 10px;
}

.head{
    border: 1.5px solid black;
    box-shadow: 5px 5px 7px rgba(0.5,0.5,0.5,0.5);
    height:100px;
    width: 300px;
    background-color: aqua;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.content{
    border: 1.5px solid black;
    box-shadow: 5px 5px 7px rgba(0.5,0.5,0.5,0.5);
    height:300px;
    width:300px;
    background-color: #4D4C7D;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    
}

.head p{
    font-family: 'Franklin Gothic Medium';
    font-size: 2rem;
    text-align: center;
    margin: auto;
   
}

.content{
    color: white;
}

.box1{
    border-radius: 10rem;
}