9farccontioshi/TranscriptApi

1.dark {2    /* --bg : #353941; */3    --heading-bg : #26282B;4    --button-bg : #5F85DB;5    --button-hover-bg : #90B8F8;6    --text-color : white;7    --rev-text-color : black;8 9    --bg : url('images/background-dark.svg');10}11 12 13.light {14    /* --bg : #448EF6; */15    --heading-bg : #75C2F6;16    --button-bg : #65DAF7;17    --button-hover-bg : #FFE981;18    --text-color : black; 19    --rev-text-color : white;20 21    --bg : url('images/background-light.svg');22}23 24nav {25    transition: all 200ms ease-in-out;26    transition-delay : 0ms;27}28 29body {30    background : var(--bg);31    background-size: cover;32    transition: background 200ms ease-in-out, color 1000ms ease-in-out;33    /* overflow: hidden; */34}35 36.grid {37    display: flex;38    flex-direction: column;39    flex-wrap: wrap;40    /* gap: 1rem; */41    grid-template-columns: minmax(240px, 1fr);42    grid-template-rows: 240px;43    margin : 10px;44    padding : 20px;45}46 47 48 49 50.heading {51    color : var(--text-color);52    margin : minmax(10px, 100px);53    padding: 50px;54    text-align: center;55    align-self: center;56    font-family: 'Opens Sans', sans-serif;57    font-style: italic;58    font-weight: 800;59    /* background-color: var(--heading-bg); */60    border-radius: 8px;61    /* filter: drop-shadow(.3rem .3rem 4px black); */62    transition: all 100ms ease-in-out;63    transition-delay : 200ms;64}65 66.url-submit-form {67    padding : 50px;68    display: flex;69    flex-direction: column;70    align-items: center;71    justify-content: center;72}73 74input[type = 'text'] {75    text-align : center;76    border: none;77}78 79 80input[type = 'text']::placeholder {81    color: var(--text-color);82    opacity: 0.4;83}84 85.btn-primary {86    background-color : var(--button-bg) !important;87    border-color : var(--button-bg) !important;88    color : var(--text-color) !important;89}90 91.btn-primary:hover {92    background-color: var(--button-hover-bg) !important;93    border-color : var(--button-hover-bg) !important;94    color : black !important;95 96}97 98 99.text {100    /* grid-column : span 1 / auto; */101    color : var(--text-color);102    padding : 30px;103    border: 2px solid var(--rev-text-color);104    border-radius: 8px;105    backdrop-filter: blur(10px);106    clip-path: circle(0% at 50% 0%);107    transition : all 200ms ease-in-out, clip-path 500ms ease-in-out;108    transition-delay : 400ms;109}110 111 112.title {113    font-family :'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;114    font-style : bold;115    font-size: large;116    text-align: center;117}118 119.content {120    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;121    margin: 5px;122    padding : 10px;123    text-align: center;124}125 126