polls.css

.pollstitle
{
    font-size:2rem;
    font-weight:lighter;
    margin-top:25px;
    align-self:center;
}

a
{
    color:#76D7C4;
}

@keyframes slidein {
    100%
    {
        transform: translateY(0);
        opacity:1;
    }
}

#polls
{
    animation:slidein 0.5s forwards;
    opacity:0;
    transform:translateY(-50px);
    display:flex;
    flex-wrap:wrap;
    color:black;
    height:fit-content;
    width:90%;
    flex-direction: column;
    margin:40px 0 40px 0;
    font-weight: 300;
    font-style:italic;
    font-size:1.5rem;
    align-items: center;
    justify-content:center;
}


#polls .createdby
{
    width:fit-content;
    height:fit-content;
    font-size:1.2rem;
    font-style:normal;
    font-weight:400;
    margin-bottom:40px;
}

#polls .createdby::before
{
    display: inline-block;
    margin: 0px 10px 5px 0px;
    height: 1px;
    content: " ";
    text-shadow: none;
    background-color: #76D7C4;
    width:25px;
}

#polls .createdby::after
{
    display: inline-block;
    margin: 0px 0px 5px 10px;
    height: 1px;
    content: " ";
    text-shadow: none;
    background-color: #76D7C4;
    width:25px;
}

#polls .polloption::before,#polls .selected::before
{
    content:" ";
    margin-left:15px;
}

#polls .polloption
{
    display:flex;
    align-items:center;
    cursor:pointer;
    border:2px solid #76D7C4;
    font-family:'Roboto', sans-serif;
    font-style:normal;
    font-size:1.2rem;
    height:fit-content;
    width:80%;
    padding:10px 0;    
    margin-top:15px;
    border-radius:5px;
    text-align:left;
}


#polls .selected
{
    display:flex;
    align-items:center;
    cursor:default;
    border:2px solid #76D7C4;
    font-family:'Roboto', sans-serif;
    font-style:normal;
    font-size:1.2rem;
    height:fit-content;
    width:80%;
    padding:10px 0;    
    margin-top:15px;
    text-align:left;
    border-radius:5px;
    background-color:#76D7C4;
    color:white;
}

#polls .polloption .choice,#polls .selected .choice
{
    margin-right:15px;
}
.nowselected
{
    background-color:#76D7C4;
    color:white;
}

#polls .polloption .countbox,
#polls .selected .countbox 
{
    display:flex;
    align-items:center;
    justify-content:center;
    background-color:#76D7C4;
    color:white;
    min-width:fit-content;
    overflow:hidden;
    height:35px;
    padding:0 5px;
    margin:auto;
    margin-right:10px;
    text-align:center;
    border-radius:5px;
}

#polls .selectbut::before
{
    margin-left:0;
}

#polls .selectbut
{
    display:block;
    text-align:center;
    cursor:pointer;
    background-color:#76D7C4;
    font-family:'Roboto', sans-serif;
    font-style:normal;
    font-size:1rem;
    height:fit-content;
    width:100px !important;
    padding:15px 20px;    
    margin-top:25px;
    border-radius:5px;
    color:white;   
}

#pollcreatebox
{
    border:2px solid #76D7C4;
    display:none;
    height:fit-content;
    opacity:0;
    width:90%;
    align-items:center;
    justify-content:center;
    padding:20px 0 30px 0;
    transform:translateY(-50px);
}


#createpoll,
#close
{
    min-width:60%;
    max-width:60%;
    box-sizing: border-box;
    margin-top:10px;
    padding:10px 0px;
    font-size:1.1rem;
    color:white;
    text-align:center;
    border-radius:5px;
    background-color:#76D7C4;
    cursor:pointer;
}

#close
{
    margin-top:10px;
    background-color:#DC143C;
}


input[type="text"],#pollcreatebox .holder #polldesc
{
    font-family:'Nunito Sans',sans-serif;
    box-sizing:border-box;
    font-size:1.1rem;
    margin-top:10px;
    width:100%;
    padding:5px 5px;
    border:1px solid black;
}

input[type="text"]:focus,#pollcreatebox .holder #polldesc:focus
{
    outline:none;
    border-color:#76D7C4;
}

.holder
{
    min-width:90%;
    max-width:90%;
    font-size:1.1rem;
    margin:15px 0;
}

.option
{
    width: 100%;
    margin-top: 15px;
}
@keyframes pollboxreveal {
    100%
    {
        transform:translateY(0);
        opacity: 1;
    }
}

@media screen and (max-width: 769px)
{
    #polls
    {
        font-size:1.1rem;
        text-align: center;
    }

    #polls .createdby
    {
    font-size:1rem;
    border-bottom:1px solid #76D7C4;
    padding-bottom:10px;
    }

    #polls .createdby::before,#polls .createdby::after {
    content:"";
    height:0;
    margin:0;
    width:0;
    }

    #polls .polloption,#polls .selected
    {
        font-size: 1rem;
        width:100%;
        text-align:left;
    }
    
    #polls .selectbut
    {
    font-size:0.9rem;
    width:fit-content !important;
    }

    #pollcreatebox,#createpoll,
    #close,input[type="text"],#pollcreatebox .holder #polldesc,.holder
    {
        font-size:0.9rem;
    }

    #createpoll,
    #close
    {
        min-width:90%;
        max-width:90%;
    }
}